<template>
  <div>
    <nav-bar title="硬件管理"></nav-bar>
    <div class="maxinBox">
      <div class="backgroundfff">
        <van-row class="realTimeTask" @click="hardWareDetails('升降机列表')" v-if="lifterData">
          <van-col :span="7">
            <img style="width: 80%;" src="https://www.wulihub.com.cn/gc/QRLaDq/images/7%E3%80%81%E7%A1%AC%E4%BB%B6%E7%9B%B8%E5%85%B3%E3%80%90%E5%8A%9F%E8%83%BD%E6%96%B0%E5%A2%9E%E3%80%91/u8220.png" alt="">
          </van-col>
          <van-col :span="15">
            <div style="color: #666;" class="fontSize14">升降机数量: {{lifterData.listNum || 0}}</div>
            <div style="color: #666;" class="fontSize14">当前在线: {{lifterData.online || 0}}</div>
            <div style="color: #666;" class="fontSize14">设备离线: {{lifterData.outline || 0}}</div>
            <div style="color: #666;" class="fontSize14">今日警告: {{lifterData.warnNum || 0}}</div>
          </van-col>
          <van-col :span="2">
            <van-icon style="line-height: 5rem;font-size: 1.5rem;" name="arrow" />
          </van-col>
        </van-row>
        <van-row class="realTimeTask" @click="hardWareDetails('塔机列表')" v-if="towerData">
          <van-col :span="7">
            <img style="width: 80%;" src="https://www.wulihub.com.cn/gc/QRLaDq/images/7%E3%80%81%E7%A1%AC%E4%BB%B6%E7%9B%B8%E5%85%B3%E3%80%90%E5%8A%9F%E8%83%BD%E6%96%B0%E5%A2%9E%E3%80%91/u8221.png" alt="">
          </van-col>
          <van-col :span="15">
            <div style="color: #666;" class="fontSize14">塔机数量:  {{towerData.totalCount || 0}}</div>
            <div style="color: #666;" class="fontSize14">当前在线:  {{towerData.onlineCount || 0}}</div>
            <div style="color: #666;" class="fontSize14">设备离线:  {{towerData.offlineCount || 0}}</div>
            <div style="color: #666;" class="fontSize14">今日警告:  <span style="color: #f00;">{{towerData.warnCount || 0}}</span></div>
          </van-col>
          <van-col :span="2">
            <van-icon style="line-height: 5rem;font-size: 1.5rem;" name="arrow" />
          </van-col>
        </van-row>
      </div>
    </div>

  </div>
</template>

<script>
  import hardwareManageAPI from '../../../api/workAPI/hardwareManageAPI.js'
  export default {
    data() {
      return {
        towerData: null,
        lifterData: null
      }
    },
    methods: {
      getTowerList() {
        let projectId = localStorage.getItem('projectId')
        hardwareManageAPI.getTowerList(projectId).then(res => {
          this.towerData = res.list[0]
        })
      },
      getLifterLine() {
        hardwareManageAPI.getLifterLine().then(res => {
          this.lifterData = res
        })
      },
      hardWareDetails(data) {
        localStorage.setItem('hardwareType', data)
        this.$router.push({
          name: 'HardwareDetails'
        })
      }
    },
    mounted() {
      this.getTowerList()
      this.getLifterLine()
    }
  }
</script>
<style scoped lang="scss">
.realTimeTask{
    padding: 0.9375rem;
    font-size: 0.875rem;
    border-bottom: 0.0625rem solid #E5E5E5;
    .van-col--7{
      img{
        width: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
</style>
